<template>
	<view class="main">
		<scroll-view  @scrolltolower="search()" scroll-y show-scrollbar="false" class="greet-scroll-view">
			<view class="search-box">
				<input v-model.trim="keyword" type="text" placeholder="请输入关键字" />
				<image @click="search('submit')"  class="search-img" src="../../static/search.svg"></image>
			</view>
			<!-- 显示祝福语 -->
			<view class="list-box">
				<view v-for="(item,index) in greets" :key="item.id" class="item">
					<view class="content">{{item.content}}</view>
					<view class="footer d-flex flex-row justify-content-between align-content-center align-items-center">
						<view class="quanity">
							<text v-if="row.copy_count>10">{{row.copy_count||0}} 热度</text>
						</view>
						<view @click="copy" class="copy d-flex flex-row justify-content-between align-items-center">
							<image class="img-25" src="../../static/copy.svg"></image>
							<view @click="copy(item.content)" class="font-color-white title">点击复制</view>
						</view>
					</view>
				</view>
				
				<view v-if="!greets.length && keyword" class="d-flex align-content-center justify-content-center p-40 font-color-gray font-size-26 tip">
					😢未匹配到内容，输入关键词试试吧
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {getGreeting,getGreetings,getSearch} from "../../api/greets.js";
	export default {
		data(){
			return {
				keyword: '',
				greets: [],
				ending: false,
				page:0,
				has_searhc: false,
			}
		},
		onLoad(options) 
		{
		},
		methods:{
			copy(content)
			{
				uni.setClipboardData({
					data: content,
					success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none',
						})
					}
				})
			},
			search(type)
			{
				if (type == 'submit') {
					this.page = 0;
					this.ending = false;
					this.has_searhc = true;
				}
				
				if (this.ending) {
					return false;
				}
				getSearch({
					keyword: this.keyword,
					category_id: this.category_id,
					page: ++this.page,
				})
				.then(data => {
					this.page = data.current_page;
					if (type == 'submit') {
						this.greets = data.data;
					} else {
						this.greets = this.greets.concat(data.data);
					}
					
					if(!data.data || !data.data.length){
						this.ending = true;
					}
				}).catch(res => {});
			},
		}
	}
</script>

<style lang="scss">
	page{
		// background-color: white;
	}
	.row-box{
		padding: 30rpx;
		.footer{
			padding-top: 30rpx;
		}
		.footer .botton{
			display: flex;
			flex-direction: row;
			background-color: $theme-color;
			border-radius: 25rpx;
			padding: 8rpx 20rpx;
			.title{
				font-size: 22rpx;
				padding-left: 4rpx;
				padding-bottom: 2rpx;
			}
		}
		.footer .share{
			background-color: #01CF97;
			border-radius: 25rpx;
		}
		.footer .copy{
			background-color: #F4615C;
		}
		.footer .lable {
			font-size: 24rpx;
		}
		.footer .lable .category {
			background-color: #F1F9FF;
			color: #00B0FF;
		}
		.footer .lable .quanity {
			background-color: #FFF6F5;
			color: #EC6965;
		}
	}
	.main{
		padding-top: 0 !important;
	}
	.list-box .item:first-child{
		padding-top: 20rpx;
		margin-top: 120rpx;
	}
	.uni-button{
		display: inline-flex;
		padding: 0;
		margin: 0;
		border-radius: 0;
		background-color: transparent;
		line-height: normal;
	}
	.uni-button::after{
		border: none;
	}
	.greet-scroll-view{
		height: 100vh;
	}
	.search-box{
		position: fixed;
		width: 100vw;
		height: 120rpx;
		background-color: white;
		top: 0;
		box-shadow: 0 0 10rpx #888888;
		input{
			background-color: $uni-bg-color-grey;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
			margin: 20rpx;
			font-size: 28rpx;
			padding-right: 60rpx;
		}
		.search-img{
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			right: 35rpx;
			top: 40rpx;
		}
	}
	.tip{
		padding-top: 200rpx;
	}
</style>
